<template>
  <view class="publish-container">
    <!-- 顶部导航 -->
    <view class="publish-header">
      <view class="header-left">
        <u-icon name="arrow-left" size="22" color="#333" @click="goBack"></u-icon>
        <text class="header-title">发布动态</text>
      </view>
      
      <u-button 
        type="primary"
        size="small"
        class="publish-btn"
        :disabled="!canPublish || publishing"
        :loading="publishing"
        @click="submitPost"
      >
        {{ publishing ? '发布中...' : '发布' }}
      </u-button>
    </view>
    
    <!-- 内容编辑区 -->
    <view class="content-editor">
      <!-- 标题输入 -->
      <view class="title-section">
        <input 
          v-model="postTitle"
          class="title-input"
          placeholder="添加标题（可选）"
          :maxlength="50"
        />
        <text class="title-counter">{{ postTitle.length }}/50</text>
      </view>
      
      <!-- 内容输入 -->
      <view class="content-section">
        <textarea 
          v-model="postContent"
          class="content-input"
          placeholder="分享你的想法..."
          :maxlength="2000"
          auto-height
          :show-confirm-bar="false"
        ></textarea>
        <text class="content-counter">{{ postContent.length }}/2000</text>
      </view>
      
      <!-- 话题选择 -->
      <view class="topic-section">
        <view class="section-header">
          <text class="section-title">添加话题</text>
          <u-icon name="plus" size="18" color="#007aff" @click="showTopicSelector"></u-icon>
        </view>
        
        <view v-if="selectedTopics.length > 0" class="selected-topics">
          <view 
            v-for="(topic, index) in selectedTopics" 
            :key="index"
            class="topic-tag"
          >
            <text class="topic-text">#{{ topic.name }}</text>
            <u-icon 
              name="close" 
              size="14" 
              color="#007aff" 
              @click="removeTopic(index)"
            ></u-icon>
          </view>
        </view>
        
        <view v-else class="topic-placeholder">
          <text class="placeholder-text">添加相关话题，让更多人看到</text>
        </view>
      </view>
      
      <!-- 媒体内容 -->
      <view class="media-section">
        <!-- 图片展示 -->
        <view v-if="selectedImages.length > 0" class="images-grid">
          <view 
            v-for="(image, index) in selectedImages" 
            :key="index"
            class="image-item"
          >
            <image :src="image" class="selected-image" mode="aspectFill"></image>
            <view class="image-remove" @click="removeImage(index)">
              <u-icon name="close" size="14" color="white"></u-icon>
            </view>
          </view>
          
          <view 
            v-if="selectedImages.length < 9"
            class="add-image"
            @click="selectImages"
          >
            <u-icon name="plus" size="24" color="#999"></u-icon>
          </view>
        </view>
        
        <!-- 视频展示 -->
        <view v-if="selectedVideo" class="video-preview">
          <video 
            :src="selectedVideo.url"
            :poster="selectedVideo.cover"
            class="selected-video"
            controls
          ></video>
          <view class="video-remove" @click="removeVideo">
            <u-icon name="close" size="16" color="white"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 功能选项 -->
      <view class="options-section">
        <view class="option-item" @click="selectImages">
          <u-icon name="image" size="24" color="#4caf50"></u-icon>
          <text class="option-text">图片</text>
        </view>
        
        <view class="option-item" @click="selectVideo">
          <u-icon name="camera" size="24" color="#2196f3"></u-icon>
          <text class="option-text">视频</text>
        </view>
        
        <view class="option-item" @click="showLocationPicker">
          <u-icon name="map" size="24" color="#ff9500"></u-icon>
          <text class="option-text">位置</text>
        </view>
        
        <view class="option-item" @click="showTopicSelector">
          <u-icon name="tag" size="24" color="#9c27b0"></u-icon>
          <text class="option-text">话题</text>
        </view>
      </view>
      
      <!-- 位置信息 -->
      <view v-if="selectedLocation" class="location-section">
        <view class="location-info">
          <u-icon name="map" size="18" color="#ff9500"></u-icon>
          <text class="location-text">{{ selectedLocation.name }}</text>
          <u-icon name="close" size="16" color="#999" @click="removeLocation"></u-icon>
        </view>
      </view>
      
      <!-- 发布设置 -->
      <view class="settings-section">
        <view class="setting-item" @click="toggleCommentEnabled">
          <view class="setting-info">
            <u-icon name="chat" size="20" color="#666"></u-icon>
            <text class="setting-text">允许评论</text>
          </view>
          <u-switch v-model="commentEnabled" size="small"></u-switch>
        </view>
        
        <view class="setting-item" @click="togglePublic">
          <view class="setting-info">
            <u-icon name="eye" size="20" color="#666"></u-icon>
            <text class="setting-text">公开可见</text>
          </view>
          <u-switch v-model="isPublic" size="small"></u-switch>
        </view>
      </view>
    </view>
    
    <!-- 话题选择弹窗 -->
    <u-popup 
      v-model="showTopicPopup" 
      mode="bottom" 
      border-radius="20"
      :safe-area-inset-bottom="true"
    >
      <view class="topic-popup">
        <view class="popup-header">
          <text class="popup-title">选择话题</text>
          <u-icon name="close" size="20" color="#999" @click="showTopicPopup = false"></u-icon>
        </view>
        
        <!-- 搜索话题 -->
        <view class="topic-search">
          <view class="search-input">
            <u-icon name="search" size="18" color="#999"></u-icon>
            <input 
              v-model="topicSearchText"
              placeholder="搜索话题或创建新话题"
              @input="searchTopics"
            />
          </view>
        </view>
        
        <!-- 热门话题 -->
        <view class="hot-topics">
          <text class="topics-title">热门话题</text>
          <view class="topics-grid">
            <view 
              v-for="(topic, index) in hotTopics" 
              :key="index"
              class="topic-option"
              :class="{ selected: isTopicSelected(topic) }"
              @click="toggleTopicSelection(topic)"
            >
              <text class="topic-name">#{{ topic.name }}</text>
              <text class="topic-count">{{ formatCount(topic.postCount) }}条</text>
            </view>
          </view>
        </view>
        
        <!-- 搜索结果 -->
        <view v-if="topicSearchText" class="search-results">
          <text class="topics-title">搜索结果</text>
          <view class="topics-list">
            <view 
              v-for="(topic, index) in searchResults" 
              :key="index"
              class="topic-result"
              :class="{ selected: isTopicSelected(topic) }"
              @click="toggleTopicSelection(topic)"
            >
              <text class="topic-name">#{{ topic.name }}</text>
              <text class="topic-count">{{ formatCount(topic.postCount) }}条</text>
            </view>
            
            <!-- 创建新话题 -->
            <view 
              v-if="canCreateTopic"
              class="create-topic"
              @click="createNewTopic"
            >
              <u-icon name="plus" size="18" color="#007aff"></u-icon>
              <text class="create-text">创建话题 "{{ topicSearchText }}"</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    
    <!-- 位置选择弹窗 -->
    <u-popup 
      v-model="showLocationPopup" 
      mode="bottom" 
      border-radius="20"
      :safe-area-inset-bottom="true"
    >
      <view class="location-popup">
        <view class="popup-header">
          <text class="popup-title">选择位置</text>
          <u-icon name="close" size="20" color="#999" @click="showLocationPopup = false"></u-icon>
        </view>
        
        <view class="location-search">
          <view class="search-input">
            <u-icon name="search" size="18" color="#999"></u-icon>
            <input 
              v-model="locationSearchText"
              placeholder="搜索位置"
              @input="searchLocations"
            />
          </view>
        </view>
        
        <view class="location-list">
          <view 
            v-for="(location, index) in nearbyLocations" 
            :key="index"
            class="location-item"
            @click="selectLocation(location)"
          >
            <u-icon name="map" size="18" color="#ff9500"></u-icon>
            <view class="location-details">
              <text class="location-name">{{ location.name }}</text>
              <text class="location-address">{{ location.address }}</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { post } from '@/utils/request';

// 话题接口
interface Topic {
  id: string;
  name: string;
  postCount: number;
}

// 位置接口
interface Location {
  id: string;
  name: string;
  address: string;
  latitude: number;
  longitude: number;
}

// 视频接口
interface Video {
  url: string;
  cover: string;
  duration: number;
}

@Component
export default class PublishPage extends Vue {
  // 数据属性
  postTitle: string = '';
  postContent: string = '';
  selectedTopics: Topic[] = [];
  selectedImages: string[] = [];
  selectedVideo: Video | null = null;
  selectedLocation: Location | null = null;
  
  commentEnabled: boolean = true;
  isPublic: boolean = true;
  publishing: boolean = false;
  
  // 话题相关
  showTopicPopup: boolean = false;
  topicSearchText: string = '';
  hotTopics: Topic[] = [];
  searchResults: Topic[] = [];
  
  // 位置相关
  showLocationPopup: boolean = false;
  locationSearchText: string = '';
  nearbyLocations: Location[] = [];
  
  // 计算属性
  get canPublish(): boolean {
    return this.postContent.trim().length > 0 || this.selectedImages.length > 0 || !!this.selectedVideo;
  }
  
  get canCreateTopic(): boolean {
    return this.topicSearchText.trim().length > 0 && 
           !this.searchResults.some(topic => topic.name.toLowerCase() === this.topicSearchText.toLowerCase());
  }
  
  // 生命周期
  onLoad() {
    this.loadHotTopics();
    this.loadNearbyLocations();
  }
  
  // 方法
  
  /**
   * 返回上一页
   */
  goBack() {
    if (this.hasContent()) {
      uni.showModal({
        title: '确认离开',
        content: '当前内容尚未发布，确定要离开吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          }
        }
      });
    } else {
      uni.navigateBack();
    }
  }
  
  /**
   * 检查是否有内容
   */
  hasContent(): boolean {
    return this.postTitle.trim().length > 0 || 
           this.postContent.trim().length > 0 || 
           this.selectedImages.length > 0 || 
           this.selectedVideo !== null;
  }
  
  /**
   * 选择图片
   */
  selectImages() {
    if (this.selectedVideo) {
      uni.showToast({
        title: '不能同时添加图片和视频',
        icon: 'none'
      });
      return;
    }
    
    const remainingCount = 9 - this.selectedImages.length;
    if (remainingCount <= 0) {
      uni.showToast({
        title: '最多只能添加9张图片',
        icon: 'none'
      });
      return;
    }
    
    uni.chooseImage({
      count: remainingCount,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.selectedImages.push(...res.tempFilePaths);
      }
    });
  }
  
  /**
   * 删除图片
   */
  removeImage(index: number) {
    this.selectedImages.splice(index, 1);
  }
  
  /**
   * 选择视频
   */
  selectVideo() {
    if (this.selectedImages.length > 0) {
      uni.showToast({
        title: '不能同时添加图片和视频',
        icon: 'none'
      });
      return;
    }
    
    uni.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      success: (res) => {
        this.selectedVideo = {
          url: res.tempFilePath,
          cover: (res as any).thumbTempFilePath || '',
          duration: res.duration
        };
      }
    });
  }
  
  /**
   * 删除视频
   */
  removeVideo() {
    this.selectedVideo = null;
  }
  
  /**
   * 显示话题选择器
   */
  showTopicSelector() {
    this.showTopicPopup = true;
  }
  
  /**
   * 加载热门话题
   */
  async loadHotTopics() {
    try {
      // 模拟数据
      this.hotTopics = [
        { id: '1', name: '新手妈妈', postCount: 1250 },
        { id: '2', name: '辅食添加', postCount: 890 },
        { id: '3', name: '睡眠训练', postCount: 567 },
        { id: '4', name: '母乳喂养', postCount: 2100 },
        { id: '5', name: '早教启蒙', postCount: 780 },
        { id: '6', name: '宝宝健康', postCount: 1500 }
      ];
    } catch (error) {
      console.error('加载热门话题失败:', error);
    }
  }
  
  /**
   * 搜索话题
   */
  searchTopics() {
    if (!this.topicSearchText.trim()) {
      this.searchResults = [];
      return;
    }
    
    // 模拟搜索
    this.searchResults = this.hotTopics.filter(topic => 
      topic.name.toLowerCase().includes(this.topicSearchText.toLowerCase())
    );
  }
  
  /**
   * 检查话题是否已选择
   */
  isTopicSelected(topic: Topic): boolean {
    return this.selectedTopics.some(t => t.id === topic.id);
  }
  
  /**
   * 切换话题选择
   */
  toggleTopicSelection(topic: Topic) {
    const index = this.selectedTopics.findIndex(t => t.id === topic.id);
    if (index > -1) {
      this.selectedTopics.splice(index, 1);
    } else {
      if (this.selectedTopics.length >= 5) {
        uni.showToast({
          title: '最多只能选择5个话题',
          icon: 'none'
        });
        return;
      }
      this.selectedTopics.push(topic);
    }
  }
  
  /**
   * 创建新话题
   */
  createNewTopic() {
    const newTopic: Topic = {
      id: Date.now().toString(),
      name: this.topicSearchText.trim(),
      postCount: 0
    };
    
    this.selectedTopics.push(newTopic);
    this.topicSearchText = '';
    this.searchResults = [];
    
    uni.showToast({
      title: '话题已添加',
      icon: 'success'
    });
  }
  
  /**
   * 删除话题
   */
  removeTopic(index: number) {
    this.selectedTopics.splice(index, 1);
  }
  
  /**
   * 显示位置选择器
   */
  showLocationPicker() {
    this.showLocationPopup = true;
  }
  
  /**
   * 加载附近位置
   */
  async loadNearbyLocations() {
    try {
      // 模拟数据
      this.nearbyLocations = [
        {
          id: '1',
          name: '北京市朝阳区',
          address: '北京市朝阳区建国门外大街',
          latitude: 39.9042,
          longitude: 116.4074
        },
        {
          id: '2',
          name: '三里屯',
          address: '北京市朝阳区三里屯路',
          latitude: 39.9388,
          longitude: 116.4565
        }
      ];
    } catch (error) {
      console.error('加载位置失败:', error);
    }
  }
  
  /**
   * 搜索位置
   */
  searchLocations() {
    // 实现位置搜索逻辑
  }
  
  /**
   * 选择位置
   */
  selectLocation(location: Location) {
    this.selectedLocation = location;
    this.showLocationPopup = false;
  }
  
  /**
   * 删除位置
   */
  removeLocation() {
    this.selectedLocation = null;
  }
  
  /**
   * 切换评论开关
   */
  toggleCommentEnabled() {
    this.commentEnabled = !this.commentEnabled;
  }
  
  /**
   * 切换公开开关
   */
  togglePublic() {
    this.isPublic = !this.isPublic;
  }
  
  /**
   * 提交发布
   */
  async submitPost() {
    if (!this.canPublish) {
      uni.showToast({
        title: '请添加内容',
        icon: 'none'
      });
      return;
    }
    
    this.publishing = true;
    
    try {
      // 上传媒体文件
      const uploadedImages = await this.uploadImages();
      const uploadedVideo = await this.uploadVideo();
      
      // 构建发布数据
      const postData = {
        title: this.postTitle.trim(),
        content: this.postContent.trim(),
        images: uploadedImages,
        video: uploadedVideo,
        topics: this.selectedTopics.map(t => ({ id: t.id, name: t.name })),
        location: this.selectedLocation,
        commentEnabled: this.commentEnabled,
        isPublic: this.isPublic
      };
      
      // 发布帖子
      const response = await post('/community/posts', postData);
      
      uni.showToast({
        title: '发布成功',
        icon: 'success'
      });
      
      // 延迟跳转
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      
    } catch (error) {
      console.error('发布失败:', error);
      uni.showToast({
        title: '发布失败，请重试',
        icon: 'none'
      });
    } finally {
      this.publishing = false;
    }
  }
  
  /**
   * 上传图片
   */
  async uploadImages(): Promise<string[]> {
    if (this.selectedImages.length === 0) return [];
    
    const uploadPromises = this.selectedImages.map(imagePath => 
      this.uploadFile(imagePath, 'image')
    );
    
    try {
      const results = await Promise.all(uploadPromises);
      return results.map(result => result.url);
    } catch (error) {
      console.error('图片上传失败:', error);
      throw new Error('图片上传失败');
    }
  }
  
  /**
   * 上传视频
   */
  async uploadVideo(): Promise<any> {
    if (!this.selectedVideo) return null;
    
    try {
      const videoResult = await this.uploadFile(this.selectedVideo.url, 'video');
      const coverResult = this.selectedVideo.cover ? 
        await this.uploadFile(this.selectedVideo.cover, 'image') : null;
      
      return {
        url: videoResult.url,
        cover: coverResult?.url || '',
        duration: this.selectedVideo.duration
      };
    } catch (error) {
      console.error('视频上传失败:', error);
      throw new Error('视频上传失败');
    }
  }
  
  /**
   * 上传文件
   */
  async uploadFile(filePath: string, type: 'image' | 'video'): Promise<{ url: string }> {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: `/api/upload/${type}`,
        filePath,
        name: 'file',
        success: (res) => {
          try {
            const data = JSON.parse(res.data);
            resolve(data);
          } catch (error) {
            reject(error);
          }
        },
        fail: reject
      });
    });
  }
  
  /**
   * 格式化数量
   */
  formatCount(count: number): string {
    if (count < 1000) {
      return count.toString();
    } else if (count < 10000) {
      return (count / 1000).toFixed(1) + 'k';
    } else {
      return (count / 10000).toFixed(1) + 'w';
    }
  }
}
</script>

<style lang="scss" scoped>
.publish-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.publish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 1rpx solid #f0f0f0;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .header-title {
      margin-left: 15rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .publish-btn {
    width: 120rpx;
    height: 60rpx;
    font-size: 26rpx;
  }
}

.content-editor {
  background-color: white;
  padding: 30rpx;
  
  .title-section {
    position: relative;
    margin-bottom: 30rpx;
    
    .title-input {
      width: 100%;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      border: none;
      padding: 0;
      line-height: 1.4;
    }
    
    .title-counter {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 22rpx;
      color: #999;
    }
  }
  
  .content-section {
    position: relative;
    margin-bottom: 30rpx;
    
    .content-input {
      width: 100%;
      min-height: 300rpx;
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
      border: none;
      padding: 0;
      resize: none;
    }
    
    .content-counter {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 22rpx;
      color: #999;
    }
  }
  
  .topic-section {
    margin-bottom: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .section-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .selected-topics {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
      
      .topic-tag {
        display: flex;
        align-items: center;
        padding: 10rpx 15rpx;
        background-color: #f0f8ff;
        border: 1rpx solid #007aff;
        border-radius: 20rpx;
        
        .topic-text {
          font-size: 24rpx;
          color: #007aff;
          margin-right: 8rpx;
        }
      }
    }
    
    .topic-placeholder {
      padding: 20rpx 0;
      
      .placeholder-text {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
  
  .media-section {
    margin-bottom: 30rpx;
    
    .images-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15rpx;
      
      .image-item {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        
        .selected-image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
        }
        
        .image-remove {
          position: absolute;
          top: -8rpx;
          right: -8rpx;
          width: 32rpx;
          height: 32rpx;
          background-color: #ff4757;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
      .add-image {
        width: 200rpx;
        height: 200rpx;
        background-color: #f8f8f8;
        border: 2rpx dashed #ddd;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .video-preview {
      position: relative;
      border-radius: 12rpx;
      overflow: hidden;
      
      .selected-video {
        width: 100%;
        height: 400rpx;
      }
      
      .video-remove {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  .options-section {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    border-top: 1rpx solid #f0f0f0;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 30rpx;
    
    .option-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .option-text {
        margin-top: 8rpx;
        font-size: 22rpx;
        color: #666;
      }
    }
  }
  
  .location-section {
    margin-bottom: 30rpx;
    
    .location-info {
      display: flex;
      align-items: center;
      padding: 15rpx 20rpx;
      background-color: #f8f8f8;
      border-radius: 12rpx;
      
      .location-text {
        flex: 1;
        margin-left: 10rpx;
        font-size: 26rpx;
        color: #333;
      }
    }
  }
  
  .settings-section {
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .setting-info {
        display: flex;
        align-items: center;
        
        .setting-text {
          margin-left: 15rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
}

.topic-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .topic-search {
    padding: 20rpx 30rpx;
    
    .search-input {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      height: 70rpx;
      background-color: #f8f8f8;
      border-radius: 35rpx;
      
      input {
        flex: 1;
        margin-left: 15rpx;
        font-size: 28rpx;
        border: none;
        background: transparent;
      }
    }
  }
  
  .hot-topics {
    padding: 20rpx 30rpx;
    
    .topics-title {
      font-size: 26rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .topics-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15rpx;
      
      .topic-option {
        padding: 20rpx;
        background-color: #f8f8f8;
        border-radius: 12rpx;
        transition: all 0.3s;
        
        &.selected {
          background-color: #e6f3ff;
          border: 1rpx solid #007aff;
        }
        
        .topic-name {
          display: block;
          font-size: 26rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .topic-count {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
  
  .search-results {
    flex: 1;
    padding: 20rpx 30rpx;
    
    .topics-title {
      font-size: 26rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .topics-list {
      .topic-result {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        margin-bottom: 10rpx;
        background-color: #f8f8f8;
        border-radius: 12rpx;
        transition: all 0.3s;
        
        &.selected {
          background-color: #e6f3ff;
          border: 1rpx solid #007aff;
        }
        
        .topic-name {
          font-size: 26rpx;
          font-weight: 600;
          color: #333;
        }
        
        .topic-count {
          font-size: 22rpx;
          color: #999;
        }
      }
      
      .create-topic {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background-color: #f0f8ff;
        border: 1rpx dashed #007aff;
        border-radius: 12rpx;
        
        .create-text {
          margin-left: 10rpx;
          font-size: 26rpx;
          color: #007aff;
        }
      }
    }
  }
}

.location-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .location-search {
    padding: 20rpx 30rpx;
    
    .search-input {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      height: 70rpx;
      background-color: #f8f8f8;
      border-radius: 35rpx;
      
      input {
        flex: 1;
        margin-left: 15rpx;
        font-size: 28rpx;
        border: none;
        background: transparent;
      }
    }
  }
  
  .location-list {
    flex: 1;
    padding: 0 30rpx 30rpx;
    
    .location-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .location-details {
        flex: 1;
        margin-left: 15rpx;
        
        .location-name {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .location-address {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>